<template>
  <header 
    class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300" 
    :class="{ 'py-2 shadow': scrollY > 50, 'py-3': scrollY <= 50 }"
  >
    <div class="container mx-auto px-4 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
          <i class="fa fa-picture-o text-white text-xl"></i>
        </div>
        <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">漫文生成</h1>
      </div>
      
        <nav class="hidden md:flex items-center gap-6">
            <router-link 
                to="/" 
                class="font-medium hover:text-primary transition-colors"
                active-class="text-primary"  
                >
                首页
            </router-link>
        <!-- 使用router-link跳转到新页面 -->
        <router-link 
            to="/my-works" 
            class="font-medium hover:text-primary transition-colors"
            active-class="text-primary"
        >
            我的作品
        </router-link>
        </nav>
      
      <!-- 用户状态区域 -->
      <div class="flex items-center gap-3">
        <!-- 已登录状态 -->
        <div v-if="user" class="flex items-center gap-3">
          <!-- 用户头像 -->
          <div class="w-8 h-8 rounded-full overflow-hidden bg-gray-200 flex items-center justify-center">
            <!-- 使用默认网络头像图片 -->
            <img 
              :src="user.avatar || 'https://picsum.photos/200/200?random=1'" 
              alt="用户头像" 
              class="w-full h-full object-cover"
            >
          </div>
          <!-- 用户昵称 -->
          <div class="hidden md:block text-sm font-medium text-gray-700">
            {{ user.nickname || user.username || '用户' }}
          </div>
          <!-- 退出登录按钮 -->
          <button 
            @click="logout"
            class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors text-sm"
          >
            退出登录
          </button>
        </div>
        
        <!-- 未登录状态 -->
        <template v-else>
          <router-link 
              to="/login" 
              class="hidden md:block px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors"
              active-class="text-primary"
          >
              登录
          </router-link>
          <router-link 
              to="/register" 
              class="hidden md:block px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
              active-class="text-white font-medium"
          >
              注册
          </router-link>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { clearAuthToken } from '../utils/api'

const scrollY = ref(0)
const router = useRouter()

// 用户状态管理
const user = ref(null)

// 检查用户登录状态
const checkUserLogin = () => {
  // 从localStorage获取用户信息（实际项目中可能会从Vuex/Pinia或API获取）
  const userInfo = localStorage.getItem('userInfo')
  if (userInfo) {
    try {
      user.value = JSON.parse(userInfo)
    } catch (e) {
      console.error('解析用户信息失败:', e)
      user.value = null
    }
  }
}

// 退出登录功能
const logout = () => {
  // 清除本地存储的用户信息和认证token
  localStorage.removeItem('userInfo')
  clearAuthToken()
  user.value = null
  // 跳转到首页
  router.push('/')
  // 可以添加一个提示消息
  alert('已成功退出登录')
}

onMounted(() => {
  const handleScroll = () => {
    scrollY.value = window.scrollY
  }
  
  window.addEventListener('scroll', handleScroll)
  // 初始化时检查用户登录状态
  checkUserLogin()
  
  return () => window.removeEventListener('scroll', handleScroll)
})

const scrollToSection = (id) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>